import React, { Component } from 'react';

export default class Inventory extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }



  componentDidMount = () => {
    //Check if should request for things' detail
    // const details = this.props.detail
    // const inventory = this.props.inventory
    // const mySend = this.props.mySend
  }

  render = () => {
    const details = this.props.detail
    const inventory = this.props.inventory
    const me = this

    const show = inventory.map(thing => {
      var detail = thing.type === 'item' ? details.items.find(it => it.id === thing.thing_id) : details.equips.find(it => it.id === thing.thing_id)
      detail = detail || { name: 'loading...', desc: 'loading...' }

      if (thing.type === 'item') {
        return (<div>
          <span>名称: {detail.name}</span>
          <span>描述: {detail.desc}</span>
          <span>数量: x{thing.num}</span>
          <a href="#" onClick={() => {me.props.useItem(thing.id)}}>使用</a>
          <br/>
        </div>)
      }else if(thing.type === 'equip'){
        return (<div>
          <span>名称: {detail.name}</span>
          <span>描述: {detail.desc}</span>
          <span>数量: x{thing.num}</span>
          <a href="#" onClick={() => {me.props.wear(thing.id)}}>装备</a>
          <br/>
        </div>)
      }
    })

    return (
      <div>
        {show}
      </div>
    )
  }
}